<template>
  <div>
    <!---->
    <!-- 背景色 -->
    <div class="banner_bac">
    </div>
    <div class="w">
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe :show-indicators="false" class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in banner" :key="index"> 
            <img @click="bannerto(item.link)" v-lazy="item.banner_img" :alt="item.describe">
          </van-swipe-item>
          <!-- <van-swipe-item> <img v-lazy="banner.img1.src" alt=""></van-swipe-item>
          <van-swipe-item> <img v-lazy="banner.img1.src" alt=""></van-swipe-item>
          <van-swipe-item> <img v-lazy="banner.img1.src" alt=""></van-swipe-item> -->
        </van-swipe>
      </div>
      <!-- 导航 -->
      <div class="nav">
        <ul class="flex-ar-center nav_box">
          <li v-for="(item) in nav" :key="item.id">
            <img class="wimg" :src="item.icon" alt="" @click="classskip(item.id)">
          </li>
        </ul>

      </div>
      <!-- 推荐 -->
      <div class="recommend">
        <ul class="flex-be-center recommend_box">
          <li class="recommend_box_item" v-for="(item) in recommend" :key="item.index">
            <div>
              <div class="recommend_title">
                <!-- <div class="recommend_title_box">
                  <van-image round width="0.32rem" height="0.32rem" :src="icon.img1" />
                  <span>{{item.number}}人推荐</span> </div> -->
              </div>

              <img @click="pic_m_to(item.link)" class="recom_bac_img" :src="item.banner_img" alt="">
              <div class="recommend_detail">
                <!-- <p>{{item.detail}}</p> -->
                <!-- <span>{{item.type}}</span> -->
              </div>
            </div>
          </li>
        </ul>

      </div>
      <!-- 列表 -->
      <div class="shopping_list">

        <!-- <li class="shopping_list_box_item"
          v-for="(item) in shopping_list" :key="item.id"
          >
            <div class="img-box">
              <img class="wimg" :src="item.src" alt="">
            </div>
            <p class="p-one shopping_list_box_item_deta">{{item.detail}}</p>
            <div class="flex-be-center shopping_list_box_item_price">
              <span>¥ {{item.price}}</span>
              <p class="flex-be-center  shopping_list_box_item_more"><span>更多</span><img :src="icon.img2" alt=""></p>
            </div>
          </li> -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >
            <ul class="flex-be-center-wrap shopping_list_box">
              <li class="shopping_list_box_item" v-for="(item) in shopping_list" :key="item.index"
                @click="choose(item.goods_id,item.goods_name)">
                <div class="img-box">
                  <img class="wimg" v-lazy="item.goods_icon" alt="">
                </div>
                <p class="p-one shopping_list_box_item_deta">{{item.goods_name}}</p>
                <!-- <div class="flex-be-center shopping_list_box_item_price">
                  <span>¥ {{item.goods_price}} </span>
                  <p class="flex-be-center  shopping_list_box_item_more"><span>更多</span><img :src="icon.img2" alt="">
                  </p>
                </div> -->
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>


      </div>

    </div>
    <!-- <div>
      123{{recommend}}
    </div> -->
  </div>


</template>
<style lang="" scoped>
  .banner_bac {
    width: 100%;
    height: 3.21rem;
    background: rgba(186, 22, 1, 1);
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .banner {
    max-height: 4rem;
    overflow: hidden;
    border-radius: 0.2rem;
    margin-top: -2.76rem;
    margin-bottom: 0.57rem;
  }

  .banner img {
    width: 100%;
  }

  .nav {
    margin-bottom: 0.69rem;
  }

  .nav_box li {
    padding: 0 0.2rem 0;
  }

  /* 推荐样式 */
  .recommend {
    margin-bottom: 0.87rem;
  }

  .recommend_box_item>div {
    width: 2.3rem;
    height: auto;
    position: relative;
  }

  .recom_bac_img {
    width: 100%;
    height: auto;
  }

  .recommend_box_item .recommend_title {
    position: absolute;
    top: 0.09rem;
    left: 0.15rem;
    display: inline-block;
    height: 0.32rem;
    background: rgba(0, 0, 0, 1);
    opacity: 0.5;
    border-radius: 0.15rem;
    font-size: 0.22rem;
    /* font-family:Source Han Sans SC; */
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 0.32rem;
    padding-right: 0.13rem;
    vertical-align: top;
    /* padding-bottom: 0.2rem; */
  }

  .recommend_box_item .recommend_title .recommend_title_box {
    display: flex;
    align-items: center;
  }

  .recommend_box_item .recommend_title .recommend_title_box>span {
    margin-left: 0.09rem;
  }

  /* .recommend_box_item .recommend_title>span{
    height: 100%;
    vertical-align:top;
    padding-bottom: 0.15rem;
  } */
  .recommend_box_item .recommend_title img {
    /* width: 0.32rem;
    height: 0.32rem;
    border: radius 50%;; */
    /* vertical-align:top;
    margin-right: 0.09rem; */
  }

  .recommend_box_item .recommend_detail {
    position: absolute;
    bottom: 0.11rem;
    left: 0.15rem;
  }

  .recommend_box_item .recommend_detail>span {
    display: inline-block;
    width: 1.19rem;
    height: 0.34rem;
    background: rgba(216, 30, 6, 1);
    border-radius: 0rem;
    font-size: 0.22rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 0.34rem;
    margin-top: 0.1rem;
  }

  .recommend_box_item .recommend_detail>p {
    font-size: 0.22rem;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 0.28rem;
    margin-right: 0.48rem;
  }

  /* 商品列表 */
  .shopping_list {
    margin-top: 0.87rem;
    margin-bottom: 1.44rem;
    padding: 0 0.11rem 0;
  }

  .shopping_list_box_item {
    width: 3.3rem;
    margin-bottom: 0.5rem;
  }

  .shopping_list_box_item .img-box {
    margin-bottom: 0.31rem;
    /* position: relative; */
  }

  /* .shopping_list_box_item .img-box p{
    position: absolute;
    text-align: center;
  } */
  .shopping_list_box_item_deta {
    text-align: center;
    height: 0.29rem;
    line-height: 0.29rem;
    font-size: 0.26rem;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin: 0 0.16rem 0.51rem;
  }

  .shopping_list_box_item_price>span {
    font-weight: bold;
    color: rgba(216, 30, 6, 1);
    font-size: 0.24rem;
  }

  .shopping_list_box_item_more {
    display: flex;
    width: 1rem;
    height: 0.3rem;
    background: rgba(216, 30, 6, 1);
    border-radius: 0.15rem;
    color: #ffffff;
    font-size: 0.18rem;
    /* padding: 0  0.15rem 0 0.2rem; */
  }

  .shopping_list_box_item_more span {
    padding-left: 0.2rem;
  }

  .shopping_list_box_item_more img {
    width: 0.1rem;
    height: 0.12rem;
    padding-right: 0.15rem;

  }





  /* .nav{
    width: 100%;
  } */
  /* .nav img{
    width: 100%;
  } */
</style>
<script>
  //引入api.js
  //import api from "../../assets/js/api.js"
  import getData from '../../assets/js/axios.js'
  export default {
    data() {
      return {

        flag: false,
        // 无限滚动数据
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        page:1,
        //banenr
        banner: [],
        // img1: {
        //   url: "./ac",
        //   src: require("../../assets/img/index/banner.jpg"),
        // }
        //},
        // 导航
        nav: {
          nav1: {
            id: 4,
            src: require("../../assets/img/index/1.png"),
          },
          nav2: {
            id: 5,
            src: require("../../assets/img/index/2.png"),
          },
          nav3: {
            id: 6,
            src: require("../../assets/img/index/3.png"),
          },
          nav4: {
            id: 7,
            src: require("../../assets/img/index/4.png"),
         
          },

        },
        //

        //推荐
        recommend: {
          // img1: {
          //   id: 1,
          //   detail: "DW潮流新品优选推荐~",
          //   number: 53858,
          //   src: require("../../assets/img/index/tuijian.png"),
          //   type: "潮流推荐"
          // },
          // img2: {
          //   id: 2,
          //   number: 53858,
          //   detail: "DW潮流新品优选推荐~",
          //   src: require("../../assets/img/index/tuijian.png"),
          //   type: "潮流推荐"
          // },
          // img3: {
          //   id: 3,
          //   number: 53858,
          //   detail: "DW潮流新品优选推荐~",
          //   src: require("../../assets/img/index/tuijian.png"),
          //   type: "潮流推荐"
          // },
        },
        //商品列表
        shopping_list: [],
        //icon
        icon: {
          img1: require("../../assets/img/index/dz.png"),//点赞
          img2: require("../../assets/img/index/MORE.png"),//三角
        },

      }
    },
    created() {
      this.onLoad();
    },
    mounted() {
      let para = {
        page:this.page
      };
      getData.index(para).then((res) => {
        let data = res.data;
        //data=data.data;
        //console.log(data,"商品内容")
        if (data.code == 2000) {
          //中部图片
          this.recommend = data.data.banner_middle;
          //商品列表
          //this.shopping_list = data.data.goods.data;
          //this.loading= false;
          //this.page++;
          //console.log( data.data,"商品列表")
          //banner图
          this.banner = data.data.banner_top;
          this.flag = true;

        }
      }).catch(err => {
        

      })
      //中部导航
      getData.classType().then(res=>{
        //console.log(res,"中部导航");
        this.nav=res.data.data;

      }).catch(err=>{

      })


    },
    
    methods: {

      bannerto(e){
        location.href=e
        // this.$router.push("me")
      },

      pic_m_to(e){
        location.href=e
      },
      
      // 下拉刷新
      onLoad() {
        if (this.refreshing) {
          this.list_box = [];
          this.refreshing = false;
        };
       
          //console.log(this.page, "向下拉了")
         var para = {
           page:this.page
         };
         ++this.page;
        //console.log(this.page,"页数")   
        getData.index(para).then(res => {
       
          //console.log(res,this.page,"数据内容22")
            var data=res.data
            this.shopping_list.push(...data.data.goods.data) ; 
            this.loading =false;
            //console.log(this.list_box,3636);
            if (this.shopping_list.length >=data.data.goods.total) {
              //console.log(this.shopping_list,'所有数据')
              //console.log(data.data.goods.total,'所有数据量')
            this.finished = true
          }
          }).catch(err => {

          })

        // setTimeout(() => {
        //   if (this.refreshing) {
        //     this.list = [];
        //     this.refreshing = false;
        //   }

        //   for (let i = 0; i < 10; i++) {
        //     this.list.push(this.list.length + 1);
        //   }
        //   this.loading = false;

        //   if (this.list.length >= this.shopping_list.length) {
        //     this.finished = true;
        //   }
        // }, 1000);


      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.shopping_list=[];
        this.onLoad();
      },
      //商品跳转
      choose(a, e) {
        this.$router.push('/goods?id=' + a +'&home=true')
      },
      //跳转到分类
      classskip(a) {
        console.log(this.$bus,"oooooooooooo")
        this.$bus.$emit("route")
        this.$router.push('/classify?id='+ a )
      }



    },


  };



</script>